<template>
  <div class="content-container" @click="show_options=false">
     <div class="content-item" v-for="(item,index) in list" :key="item.id" >
        <h1 class="content-title">{{item.title}}</h1>
        <div class="content">
          <div class="content-cover" v-if="item.pic_url">
            <img  :src="item.pic_url" alt="">
          </div>
          <div class="rich-content" v-bind:class="{'ellipsis':text_index !== index}" >
              {{item.content_text}}
            <div v-if="text_index !== index">
              <div class="show-more-mask"></div>
              <div class="show-more-btn">
                <span @click.stop="showContentText(index)">查看更多</span>
                <span class="iconfont icon">&#xe6b9;</span>
              </div>
            </div>
          </div>
        
        </div>
        <div class="content-action">
          <button class="agree-action" type="button">
            <span class="iconfont icon">&#xe8b0;</span>
            <span>赞同 {{item.likes}}</span>
          </button>
          <button class="disagree-action" type="button">
            <span class="iconfont icon">&#xe65b;</span>
          </button>
          <button class="comment-action" type="button">
            <span class="iconfont icon">&#xe6ba;</span>
            <span>评论 {{item.comment}}</span>
          </button>
          <button class="like-action" type="button">
            <span class="iconfont icon" >&#xe629;</span>
          </button>
          <div class="more-action" @click.stop="showOptions(index)">
            <i class="iconfont" >&#xe8af;</i>
            <transition name="options">
              <div v-show="option_index === index && show_options">
                <div class="triangle" ></div>
                <div class="more-action-container" >
                  <div class="more-action-item" @click="like">
                    喜欢
                  </div>
                  <div class="more-action-item">
                    举报
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- <div class="content-item">
        <h1 class="content-title">为什么室友随随便便就能聊到一个野王带她上分?</h1>
        <div class="content">
          <div class="content-cover">
            <img  src="https://pic1.zhimg.com/50/v2-5aff51163e48f0cf04a181e652491ba3_400x224.jpg" alt="">
          </div>
          

          <div class="rich-content">
            <span>
            旗木卡卡西： 对于野王来说，是不缺妹子的，不管现实中
            他是肥胖油头臭屌丝，或者没有文化满口脏话的键盘侠，只
            要他是荣耀百星，巅峰两千，换上忧郁男头，起个为情所伤
            的名字（负心中热爱，她与心动皆失）当然也可以是…
            </span>
            <div class="show-more-mask"></div>
            <div class="show-more-btn">
              <span>查看更多</span>
              <span class="iconfont icon">&#xe6b9;</span>
            </div>
          </div>
          
        </div>
        <div class="content-action">
          <button class="agree-action" type="button">
            <span class="iconfont icon">&#xe8b0;</span>
            <span>赞同 1753</span>
          </button>
          <button class="disagree-action" type="button">
            <span class="iconfont icon">&#xe65b;</span>
          </button>
          <button class="comment-action" type="button">
            <span class="iconfont icon">&#xe6ba;</span>
            <span>评论 330</span>
          </button>
          <button class="like-action" type="button">
            <span class="iconfont icon" >&#xe629;</span>
          </button>
          <div class="more-action" @click="showOptions">
            <i class="iconfont" >&#xe8af;</i>
            <transition name="options">
              <div v-show="show">
                <div class="triangle" ></div>
                <div class="more-action-container" >
                  <div class="more-action-item" @click="like">
                    喜欢
                  </div>
                  <div class="more-action-item">
                    举报
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div> -->

      <!-- <div class="content-item">
        <h1 class="content-title">工具类前端项目的复杂度真的可以跟后端相提并论吗？</h1>
        <div class="content">
          <div class="rich-content">
            <span>
            贺师俊： 其他先不说，我觉得你对IDE的难度太过低估了。
            VSCode为什么牛逼，据吕鹏说，一个很重要的原因是VS
            Code的项目经理是两个写了20年Ec…
            </span>
            <div class="show-more-mask"></div>
            <div class="show-more-btn">
              <span>查看更多</span>
              <span class="iconfont icon">&#xe6b9;</span>
            </div>
          </div>
        </div>
        <div class="content-action">
          <button class="agree-action" type="button">
            <span class="iconfont icon">&#xe8b0;</span>
            <span>赞同 1753</span>
          </button>
          <button class="disagree-action" type="button">
            <span class="iconfont icon">&#xe65b;</span>
          </button>
          <button class="comment-action" type="button">
            <span class="iconfont icon">&#xe6ba;</span>
            <span>评论 330</span>
          </button>
          <button class="like-action" type="button">
            <span class="iconfont icon" >&#xe629;</span>
          </button>
          <div class="more-action">
            <span class="iconfont">&#xe8af;</span>
            <div class="triangle">

            </div>
            <div class="more-action-container">
              <div class="more-action-item">
                喜欢
              </div>
              <div class="more-action-item">
                举报
              </div>
              
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <h1 class="content-title">如何看待中山大学2020年7月1日学生在宿舍坠亡？</h1>
        <div class="content">
          <div class="rich-content">
            <span>
            匿名用户： 无心再去探究师兄背后的故事，愿逝者安息。 
            我不能说我对他跳下去的那一刻的心境可以感同身受。但
            是我至少可以理解部分。 如果是那种昼夜颠倒一直在宿…
            </span>
            <div class="show-more-mask"></div>
            <div class="show-more-btn">
              <span>查看更多</span>
              <span class="iconfont icon">&#xe6b9;</span>
            </div>
          </div>
        </div>
        <div class="content-action">
          <button class="agree-action" type="button">
            <span class="iconfont icon">&#xe8b0;</span>
            <span>赞同 1753</span>
          </button>
          <button class="disagree-action" type="button">
            <span class="iconfont icon">&#xe65b;</span>
          </button>
          <button class="comment-action" type="button">
            <span class="iconfont icon">&#xe6ba;</span>
            <span>评论 330</span>
          </button>
          <button class="like-action" type="button">
            <span class="iconfont icon" >&#xe629;</span>
          </button>
          <div class="more-action">
            <span class="iconfont">&#xe8af;</span>
            <div class="triangle">

            </div>
            <div class="more-action-container">
              <div class="more-action-item">
                喜欢
              </div>
              <div class="more-action-item">
                举报
              </div>
              
            </div>
          </div>
        </div>
      </div>
       -->
  </div>
  
</template>

<script>
export default {
  name: 'home-content',
  data:()=>{
    return{
      option_index:'',
      show_options:false,
      text_index:'',
      show_text:false,
      list:[
        {
          id:3,
          pic_url:'https://pic1.zhimg.com/v2-f1ee4f29c4996ddc9d0ffe63724b249c_600x250.jpg',
          title:'S8决赛 FNC对阵IG万字全复盘 教你怎么硬核吹IG！',
          content_text:'文章出自所属官方专栏 瓦罗兰文艺复兴联合会作者：IG牛逼！LPL牛逼！这里依旧是硬核路线的万字全复盘系列，我将详细为你解读一场比赛，从BP到眼位到兵线到操作，无死角全面剖析精彩比赛。今天，为了庆祝IG夺冠。在的邀…',
          likes:1753,
          comment:330
        },
        {
          id:0,
          pic_url:'https://pic1.zhimg.com/50/v2-5aff51163e48f0cf04a181e652491ba3_400x224.jpg',
          title:'为什么室友随随便便就能聊到一个野王带她上分?',
          content_text:'旗木卡卡西： 对于野王来说，是不缺妹子的，不管现实中他是肥胖油头臭屌丝，或者没有文化满口脏话的键盘侠，只要他是荣耀百星，巅峰两千，换上忧郁 男头，起个为情所伤',
          likes:1753,
          comment:330
        },
        {
          id:1,
          pic_url:'',
          title:'工具类前端项目的复杂度真的可以跟后端相提并论吗？',
          content_text:'贺师俊： 其他先不说，我觉得你对IDE的难度太过低估了。VSCode为什么牛逼，据吕鹏说，一个很重要的原因是VSCode的项目经理是两个写了20年Ec…贺师俊： 其他先不说，我觉得你对IDE的难度太过低估了。VSCode为什么牛逼，据吕鹏说，一个很重要的原因是VSCode的项目经理是两个写了20年Ec…贺师俊： 其他先不说，我觉得你对IDE的难度太过低估了。VSCode为什么牛逼，据吕鹏说，一个很重要的原因是VSCode的项目经理是两个写了20年Ec…贺师俊： 其他先不说，我觉得你对IDE的难度太过低估了。VSCode为什么牛逼，据吕鹏说，一个很重要的原因是VSCode的项目经理是两个写了20年Ec…',
          likes:1753,
          comment:330
        },
        {
          id:2,
          pic_url:'',
          title:'如何看待中山大学2020年7月1日学生在宿舍坠亡？',
          content_text:'匿名用户： 无心再去探究师兄背后的故事，愿逝者安息。 我不能说我对他跳下去的那一刻的心境可以感同身受。但是我至少可以理解部分。 如果是那种昼夜颠倒一直在宿…',
          likes:1753,
          comment:330
        }
      ]
    }
  },
  methods:{
    showOptions:function(index){
      this.option_index = index;
      this.show_options = !this.show_options;
    },
    showContentText:function(index){
      this.show_options = false;
      this.text_index = index;
      this.show_text = !this.show_text;
    },
    like:function(){
      alert('尼美舒利分散片');
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../../assets/styles/common.less';
.iconfont{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
  .options-enter-active,.options-leave-active{
    transition: opacity .25s;
  }
  .options-enter,.options-leave-to{
    opacity: 0;
  }
  button{
    outline: none;
  }
  .content-container{
    font-size: 17rem / @baseFont;
    top: 53rem / @baseFont;
    background-color: #f6f6f6;
    z-index: 1;
    .content-item{
      background-color: #fff;
      display: flex;
      flex-direction: column;
      padding: 20rem / @baseFont;
      margin-bottom: 10rem / @baseFont;
      .content-title{
        font-size: 17rem / @baseFont;
        line-height: 1.4;
        font-weight: bold;
      }
      .content{
        font-size: 17rem / @baseFont;
        line-height: 1.67;
        .ellipsis{
          display: -webkit-box;             /*将对象转为弹性盒模型展示*/
          -webkit-box-orient: vertical;     /*设置弹性盒模型子元素的排列方式*/
          -webkit-line-clamp: 2;            /*限制文本行数*/
          overflow: hidden;                 /*超出隐藏*/
          max-height: 60rem / @baseFont;
        }
        .rich-content{
          font-size: 15rem/@baseFont;
          z-index: 1;
          position: relative;
          .show-more-mask{
            line-height: 1.67;
            height: 22rem / @baseFont;
            z-index: 50;
            background: linear-gradient(60deg,rgba(255,255,255,0),#fff);
            width: 120rem / @baseFont;
            position: absolute;
            bottom: 0;
            right: 55rem / @baseFont;;
          }
          .show-more-btn{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            position: absolute;
            bottom: 0;
            right: 0;
            //纯CSS3实现背景色渐变
            // background: linear-gradient(180deg,rgba(255,255,255,10),#fff);
            // background: linear-gradient(60deg,rgba(255,255,255,0),#fff);
            background : #FFF;
            color:#175199;
            line-height: 1.67;
            height: 25rem / @baseFont;
            z-index: 50;
            span{
              cursor: pointer;
            }
            .icon{
              font-weight: 700;
              color:#175199;
              font-size:20rem / @baseFont;
            }
          }
        }
        .content-cover{
          position: relative;
          overflow: hidden;
          width: 100%;
          height: 144rem/@baseFont;
          margin-top: 10rem / @baseFont;
          border-radius: 5rem/@baseFont;
          img{
            width: 100%;
          }
        }
      }
      .content-action{
        font-size: 14rem / @baseFont;
        display: flex;
        padding-top: 10rem / @baseFont ;
        .triangle{
          height: 10rem / @baseFont;
          width:  10rem / @baseFont;
          position: absolute;
          bottom: -3rem / @baseFont;
          left:50% - 10rem;
          border-top: 1rem / @baseFont solid #ebebeb;
          border-left: 1rem / @baseFont solid #ebebeb;
          background-color: #FFF;
          z-index: 10;
          transform: rotate(45deg);

        }
        .more-action-container{
          z-index: 9;
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: #FFF;
          border: 1rem / @baseFont solid #ebebeb;
          box-shadow: 0 5px 20px rgba(26,26,26,.1);
          width:80rem / @baseFont;
          border-radius: 4rem / @baseFont;
          position: absolute;
          top: 30rem / @baseFont;
          left: -60%;
          padding: 6rem / @baseFont 0;
        }
        .icon{
          font-size: 17rem / @baseFont;
        }
        .agree-action,.disagree-action,.comment-action,.more-action{
          display: flex;
          align-items: center;
          height: 32rem / @baseFont;
          color: #0084ff;
          padding: 0 8rem / @baseFont;
          background: rgba(0,132,255,.1);
          border-color: transparent;
        }
        .disagree-action{
          margin-left: 8rem / @baseFont;
          padding: 0 6rem / @baseFont;
        }
        .comment-action{
          background-color: #fff;
          color: #8590a6;
          padding-left: 8rem / @baseFont;
        }
        .like-action,.more-action{
          background-color: #fff;
          color: #8590a6;
          border: none;
        }
        .more-action{
          font-size: 20rem / @baseFont;
          position: relative;
          .more-action-item{
            display: flex;
            align-content: center;
            padding: 10rem / @baseFont 0;
            font-size: 14rem / @baseFont;
          }
        }
          
      }
    }
  }
  
</style>
